<template>
	<view class="home">
		<view class="h5">
			<view>
				<input type="text" placeholder="手机号" v-model="mobile" />
			</view>
			<view class="login-item">
				<input class="login-item__input" type="text" placeholder="验证码" v-model="yanzhenma">
				<button class="login-item__fasong" :disabled="fasong_type" @click="getYanzhen">{{fasong_str}}</button>
			</view>
			<view class="login-denglu">
				<button type="primary" @click="bindTel" class="login-btn">确定绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				mobile: '',
				yanzhenma: '',
				fasong_str: '获取验证码',
				fasong_type: false
			}
		},
		computed: {
			...mapState(['userinfo'])
		},

		onShow() {
			// 微信分享
			this.shareWx()
			
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showToast({
					title:'请先微信登录',
					success() {
						uni.navigateTo({
                url: '/pages/login/login?reffer=' + window.location.href
            })
					}
				})

				return
			}
		},

		methods: {
			// 获取验证码
			getYanzhen() {
				//验证手机号码
				if (!this.checkMobile()) return

				uni.showLoading({
					mask: true
				})

				const _this = this
				this.$api.get_yanzhenma({
					tel: this.mobile
				}).then(res => {
					//把状态设置为不可点击
					_this.fasong_type = true

					uni.hideLoading()

					var num_dao = 30
					var set_dao = setInterval(() => {
						if (num_dao > 0) {
							this.fasong_str = num_dao
							num_dao = num_dao - 1
						} else {
							clearInterval(set_dao)
							this.fasong_type = false
							this.fasong_str = "获取验证码"
						}
					}, 1000)

				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '请重试',
						icon: 'none',
						mask: true
					})
				})
			},
			// 登录
			bindTel() {
				const _this = this

				if (!this.checkMobile()) return

				const postData = {
					user_id: this.userinfo.id,
					mobile: this.mobile,
					yanzhenma: this.yanzhenma
				};

				this.$api.bindTel(postData).then(res => {
					console.log('res=', res)
					if (res.code === 1) {
						// 把登录信息赋值给 vuex 中的 userinfo
						_this.$store.dispatch('set_userinfo', res.data)

						uni.showToast({
							title: res.msg,
							mask: true,
							success() {
								// 把登录信息赋值给 vuex 中的 userinfo
								setTimeout(function(){
									uni.navigateTo({
										url: '/pages/me/me'
									})
								}, 1500)

							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							mask: true,
							icon: 'none'
						})
					}

				}).catch(err => {
					uni.showToast({
						title: '验证码错误!请重试!',
						icon: 'none'
					})
					console.log(err)
				})

			},
			// 验证手机号
			checkMobile() {
				if (!this.mobile) {
					uni.showToast({
						title: '号码不能为空!',
						icon: 'none'
					})
					return false
				} else if (!this.$api.check_mobile(this.mobile)) {
					uni.showToast({
						title: '请输入正确的号码格式!',
						icon: 'none'
					})
					return false
				}
				return true
			}

		}
	}
</script>

<style lang="scss">
	.home {
		padding: 15px;

		input {
			height: 46px;
			border: solid 1px #DDDDDD;
			border-radius: 5px;
			margin-bottom: 15px;
			padding: 0px 15px;
		}

		.login-item {
			display: flex;
			justify-content: space-between;

			.login-item__input {
				flex: 1;
				margin-right: 10px;
			}

			.login-item__fasong {
				flex-shrink: 0;
				width: 140px;
				height: 46px;
				line-height: 46px;
				border-radius: 5px;
				margin-bottom: 15px;
				text-align: center;
				color: #666;
				box-sizing: border-box;
			}
		}

		.login-btn{
			background: #f07373;
		}

		.wechath5{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40px;
			border-top: 1px solid #ccc;
			padding: 20px 0;
			text-decoration: none;

			image{
				width: 25px;
				margin-right: 5px;
			}

			text{
				font-size: 18px;
				color: #45bb35;
				text-decoration: none;
			}
		}

		// #ifdef MP-WEIXIN
		.weixin {
			margin-top: 20px;
		}

		.wx-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 100px;

			.wx-content__img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}

			.wx-content__title {
				color: #666;
				margin-top: 20px;
			}
		}
		// #endif
	}
</style>
